<template>
  <j-modal
    width="80%"
    :title="title"
    :maskClosable="false"
    switchFullscreen
    :visible.sync="editModalVisible"
    @cancel="handleCancleDbSync"
  >
  <template slot="footer">
      <a-button @click="handleCancleDbSync">
        关闭
      </a-button>
      <a-button type="primary" :loading="syncLoading" @click="handleDbSync">确认</a-button>
    </template>
    <div class="table-page-search-wrapper warp">
      <a-form-model layout="horizontal" labelAlign="right" ref="ruleForm" :label-col="labelCol" :wrapper-col="wrapperCol" :model="formData" :rules="rules">
        <a-row :gutter="24">
          <a-col :xl="8" :lg="8" :md="8" :sm="24" >
            <a-form-model-item label="计划编码" prop="planCode">
              <a-input :disabled="disableSubmit || formData.id" v-model="formData.planCode" placeholder="请输入计划编码"/>
            </a-form-model-item>
          </a-col>
          <a-col :xl="8" :lg="8" :md="8" :sm="24" >
            <a-form-model-item label="计划名称" prop="planName">
              <a-input :disabled="disableSubmit" v-model="formData.planName" placeholder="请输入计划名称"/>
            </a-form-model-item>
          </a-col>
          <a-col :xl="8" :lg="8" :md="8" :sm="24">
            <a-form-model-item label="绩效周期" prop="accountCycle">
              <j-dict-select-tag
                :disabled="disableSubmit"
                v-model="formData.accountCycle"
                placeholder="请选择考核类型"
                dict-code="hr_account_cycle"
              >
              </j-dict-select-tag>
            </a-form-model-item>
          </a-col>
          <a-col :xl="8" :lg="8" :md="8" :sm="24">
            <a-form-model-item label="考核方式" prop="planType">
              <j-dict-select-tag
                :disabled="disableSubmit"
                v-model="formData.planType"
                placeholder="请选择考核方式"
                dict-code="hr_assessment_type"
              >
              </j-dict-select-tag>
            </a-form-model-item>
          </a-col>
          <a-col :xl="8" :lg="8" :md="8" :sm="24">
            <a-form-model-item label="计划说明">
              <a-textarea :rows="1" v-model="formData.remark" placeholder="请输入计划说明"/>
            </a-form-model-item>
          </a-col>
          <a-col :xl="8" :lg="8" :md="8" :sm="24" >
            <a-form-model-item label="是否自评">
              <a-checkbox v-model="formData.selfAble" />
            </a-form-model-item>
          </a-col>
          <a-col :xl="16" :lg="16" :md="16" :sm="24" >
            <a-form-model-item label="被考评人" :label-col="{span:3}" :wrapper-col="{span:21}">
              <j-select-multi-user :value="users" @select="handleUserChange" />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
      <a-tabs v-model="tab" :tabBarStyle="{marginBottom: '0px'}">
        <a-tab-pane key="1" tab="评价流程" forceRender>
          <assessment-process-table ref="assessmentProcessTable" :dataSource="formData.procs"></assessment-process-table>
        </a-tab-pane>
        <a-tab-pane key="2" tab="考核指标" forceRender>
          <assessment-items-table ref="assessmentItemsTable" :dataSource="formData.indexes"></assessment-items-table>
        </a-tab-pane>
        <a-tab-pane key="3" tab="得分级别" forceRender>
          <score-table ref="scoreTable" :dataSource="formData.rules"></score-table>
        </a-tab-pane>
        <a-tab-pane key="4" tab="被考核人" forceRender>
          <assessment-user ref="assessmentUser" @change="userSelect" :dataSource="formData.users"></assessment-user>
        </a-tab-pane>
      </a-tabs>
    </div>
  </j-modal>
</template>
<script>
import { postAction, putAction } from '@/api/manage'
import { validateDuplicateValue } from '@/utils/util'
import AssessmentProcessTable from '../modules/AssessmentProcessTable'
import ScoreTable from '../modules/ScoreTable'
import AssessmentItemsTable from '../modules/AssessmentItemsTable'
import AssessmentUser from '../modules/AssessmentUser'
import JSelectMultiUser from '@/components/jeecgbiz/JSelectMultiUser'
export default {
  name: 'AssessmentPlanModal',
  components: {
    AssessmentProcessTable,
    JSelectMultiUser,
    AssessmentItemsTable,
    AssessmentUser,
    ScoreTable
  },
  data() {
    return {
      editModalVisible: false,
      disableSubmit: false,
      title: '新增',
      rules: {
        itemName: [
          { required: true, message: '请输入计划名称', trigger: 'blur' }
        ],
        planCode: [
          { required: true, message: '请输入计划编码', trigger: 'blur' },
          { validator: (rule, value, callback) => validateDuplicateValue('hr_assessment_plan', 'plan_code', value, this.formData.id, callback) }
        ]
      },
      formData: {},
      syncLoading: false,
      url: {
        add: '/hr/assessment/plan/addWithChildren',
        edit: '/hr/assessment/plan/editWithChildren',
        queryById: '/hr/assessment/plan/list'
      },
      labelCol: { span: 6 },
      wrapperCol: { span: 18 },
      tab: '1'
    }
  },
  computed: {
    users() {
      if (this.formData.users) {
        const usernames = []
        this.formData.users.map(item => {
          usernames.push(item.username)
        })
        return usernames.join(',')
      } else {
        return ''
      }
    }
  },
  methods: {
    handleCancleDbSync() {
      this.disableSubmit = false
      this.$refs['ruleForm'].resetFields()
      this.editModalVisible = false
    },
    add() {
      this.formData = { }
      this.editModalVisible = true
    },
    edit(data) {
      this.formData = JSON.parse(JSON.stringify(data))
      this.editModalVisible = true
    },
    async handleDbSync() {
      Promise.all([
        this.$refs.assessmentProcessTable.validate(),
        this.$refs.assessmentItemsTable.validate(),
        this.$refs.scoreTable.validate(),
        this.$refs.assessmentUser.validate(),
        this.$refs['ruleForm'].validate()
      ]).then((res) => {
        this.updateData()
      }).catch(function(reason) {
        console.log(reason)
      })
    },
    updateData() {
      this.syncLoading = true
      const { fullData } = this.$refs.assessmentProcessTable.getTableData()
      const itemsData = this.$refs.assessmentItemsTable.getTableData()
      const scoreData = this.$refs.scoreTable.getTableData()
      const usersData = this.$refs.assessmentUser.getTableData()
      this.formData.procs = fullData
      this.formData.indexes = itemsData.fullData
      this.formData.rules = scoreData.fullData
      this.formData.users = usersData.fullData
      if (this.formData.id) {
        putAction(this.url.edit, this.formData).then(res => {
          this.actionSuccess(res)
        })
      } else {
        postAction(this.url.add, this.formData).then(res => {
          this.actionSuccess(res)
        })
      }
    },
    actionSuccess(res) {
      this.syncLoading = false
      if (res.success) {
        this.$emit('ok')
        this.editModalVisible = false
      } else {
        this.$message.warning(res.message)
      }
    },
    handleUserChange(users) {
      this.tab = '4'
      this.$refs.assessmentUser.handleAdd(users)
    },
    userSelect(data) {
      this.formData.users = data.fullData
    }
  }
}
</script>
<style lang="less">

</style>
